<template>
  <div ref="containerRef" :class="['galaxy-container', galaxyCore.store.theme]">
    <GalaxyCanvas />
    <Toolbar />
    <ContextMenu />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import GalaxyCanvas from './GalaxyCanvas.vue';
import Toolbar from './Toolbar.vue';
import ContextMenu from './ContextMenu.vue';
import galaxyCore from '../index';

const containerRef = ref(null);

onMounted(() => {
  document.addEventListener('contextmenu', function (event) {
    event.preventDefault(); // 阻止默认行为
  });
});
</script>

<style scoped>
.galaxy-container {
  width: 100%;
  height: 100vh;
  position: relative;
  transition: background-color 0.3s ease;
}

.galaxy-container.dark {
  background: radial-gradient(#111, #000);
}

.galaxy-container.light {
  background: radial-gradient(#f5f5f5, #ffffff);
}
</style>